<template>
    <van-nav-bar
        title="充值"
        right-text="充值记录"
        @click-right="onClickRight"
        />
  <div class="home-container">
    <van-field label-width="2rem" v-model="data.amount" type="number" label="金额" placeholder="输入充值金额" />
    <van-field label-width="2rem" name="uploader" label="截图">
      <template #input>
        <van-uploader
                      :after-read="afterRead"
                      v-model="data.fileList"
                      :max-count="1" />
      </template>
    </van-field>
      <div style="margin: 16px;">
          <van-button round block type="primary" @click="onSubmit">
              提交
          </van-button>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {RechargeApi, UploadFile} from "@/config/api";
import {showToast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter()
const data = ref({
  amount: null,
  czImg: '',
  fileList: []
})
const afterRead = (file) => {
    let formData = new FormData()
    formData.append("file", file.file)
    UploadFile(formData).then(res => {
        data.value.czImg = res
        showToast('上传成功')
    })
};

const onClickRight = () => {
  router.push("/recharge-list")
}

const onSubmit = () => {
    let { amount, czImg } = data.value
    let form = {
        amount: amount || 0,
        czImg
    }
    RechargeApi(form).then(res => {
        console.log(res)
        showToast('充值申请已提交')
    })
}

</script>

<style lang="less" scoped>
.van-field {
  font-size: 24px;
  height: 100px;
  display: flex;
  align-content: center;
  align-items: center;
}
</style>
